<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        body {
            margin: 0;
            padding: 0;
            border: 0;
            height: 100%;
            width: 100%;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .main {
            height: 100%;
            width: 100%;
            position: absolute;
            background-color: rgba(243, 243, 243, 0.5);
            /*position: fixed;
            top:0;*/
        }

        .pic {
            width: 100%;
            height: 14rem;
            position: fixed;
            top: 0;
            z-index: -9999
        }

        .pic_img {
            width: 100%;
            height: 14rem;
            /*margin-top: 2rem;*/
        }

        .pic_img img {
            width: 100%;
            height: 100%;
        }

        .pic_img_r {
            width: 25%;
            height: 5.5rem;
            margin-right: 0rem;
            position: relative;
        }

        .pic_r {
            width: 100%;
            height: 100%;
        }

        .pic_r img {
            width: 100%;
            height: 100%;
        }

        .pic_bot {
            position: absolute;
            bottom: 0%;
            width: 100%;
            margin: 0 auto;
            height: 1.5rem;
            line-height: 1.5rem;
            z-index: 999;
            background-color: rgb(0, 0, 0, 0.3);
            color: #fff;
        }

        .pic_bot p {
            color: #fff;
            width: 60%;
            float: left;
            font-size: 0.6rem;
        }

        .mei {
            width: 25%;
            height: 0.8rem;
            /*line-height: 1rem;*/
            margin-left: 0.1rem;
            /*margin-top: 0.3rem;*/
        }

        .mei img {
            width: 100%;
            height: 100%;
        }

        .nav {
            width: 100%;
            padding: 0.5rem 0.8rem;
            height: 3rem;
            background-color: rgba(243, 243, 243, 0.5);
            font-size: 0.85rem;
            line-height: 1.5rem;
            position: absolute;
            left: 0px;
            bottom: 4.7rem;
            z-index: 99999;
        }

        .nav_list {
            width: 93%;
            padding: 0.5rem 0.8rem;
            font-size: 0.85rem;
            height: 100%;
            position: fixed;
            overflow-y: scroll;
            background-color: rgba(0, 0, 0, 0.1);
            z-index: 99999;
            bottom: 0px;
            height: 12rem;
        }

        .footer {
            width: 93%;
            padding: 0.5rem 0.8rem;
            height: 3.5rem;
            position: fixed;
            bottom: 0%;
            background-color: #fff;
            z-index: 99999;
        }

        .footer_text {
            width: 65%;
            line-height: 3rem;
            padding-left: 0.5rem;
            height: 3rem;
            border-radius: 0.5rem;
            margin: 0.1rem 0.3rem 0rem 0.3rem;
            background-color: rgba(243, 243, 243, 0.5);
        }

        .footer_text button {
            width: 90%;
            outline: none;
            color: #ccc;
        }

        #txt {
            background: url(../image/happy.png) center right;
            background-size: 10% 100%;
            background-repeat: no-repeat;
            padding-right: 0.5rem;
        }

        .footer_right {
            width: 28%;
            height: 3rem;
            margin-top: 0.5rem;
        }

        .right_one {
            width: 44%;
            height: 100%;
            margin-left: 0.3rem;
        }

        .one_img {
            width: 70%;
            height: 1.7rem;
            margin: 0 auto;
        }

        .one_img img {
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .right_one p {
            width: 120%;
            /*text-align: center;*/
            margin-left: 0.5rem;
            font-size: 0.72rem;
            margin-top: 0.2rem;
        }

        .Navbtn {
            background-color: #44dc12;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            position: absolute;
            right: 5px;
            top: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="pic">
            <div class="pic_img fl">
                <img src="" id="fm" style="width:100%;height:90%;display:none">
            </div>
            <!-- <div class="pic_img_r fr">
          <div class="pic_r">
            <img src="../image/u33.png" alt="">
          </div>
          <div class="pic_bot">
            <div class="mei fl">
              <img src="../image/meigui.png" alt="">
            </div>
            <p>鲜花数:0</p>
          </div>
        </div> -->
        </div>
        <!-- 内容 -->
        <div class="nav">
            <p id="titles"></p>
            <!-- <p>不要分心哦</p> -->
            <p>每天都要专心学习</p>
        </div>
        <div class="nav_list" id="say_list">
            <p id="name"></p>
            <button class="Navbtn" onclick="closedPiu()">关闭视频</button>
        </div>
        <div class="footer">
            <div class="footer_text fl">
              <button class="txt" onclick="dialog()">说两句呗</button>
                <!-- <input type="text" name="" placeholder="说两句呗~" id="txt" class="txt" onfocus="setStyle()" onblur="getStyle()" disabled> -->
                <!-- <img src="../image/happy.png" style="width:2rem;height:2rem"> -->
            </div>
            <div class="footer_right fl">
                <div class="right_one fl zai" id="zai" onclick="opense()">
                    <div class="one_img" style="margin-left:0.5rem;">
                        <img src="../image/book.png" alt="">
                    </div>
                    <p style="margin-left:0rem;">在售课程</p>
                </div>
                <div class="right_one fl fa" id="fa" style="display:none;">
                  <p onclick="" style="margin-left:-0.2rem;background-color:#40cccc;color:#fff;height:1.7rem;border-radius:0.8rem;text-align:center;line-height:1.7rem;font-size:0.9rem;margin-top:0.2rem;">发送</p>
                </div>
                <div class="right_one fl" onclick="js()">
                    <div class="one_img">
                        <img src="../image/shou.png" alt="">
                    </div>
                    <p>举手</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script>
    function setStyle() {
        setTimeout(function() {
            document.getElementById("fa").style.display = "block";
            document.getElementById("zai").style.display = "none";
        }, 500);

    }
    function getStyle() {
        setTimeout(function() {
            document.getElementById("zai").style.display = "block";
            document.getElementById("fa").style.display = "none";
        }, 500)

    }
</script>
<script type="text/javascript">
    var userinfo = $api.getStorage('userinfo');
    var mecshop
    var id = ''
    var ll_url
    var qiniuLive
    var ry_token
    var room
    var uname

    var ws = null;


    apiready = function() {
        id = api.pageParam.id

        uname = userinfo.nick_name;
        $("#name").html(userinfo.nick_name + '进入了直播间')
        qiniuLive = api.require('qiniuLive');
        //set_ry_token(userinfo)
        get_list()


        // setTimeout(function () {
        //     fninitPMediaPlayer();
        // }, 3000);
        qiniuLive.addEventListener({
            name: 'status'
        }, function(ret) {
            if (ret.status == 2) {
                qiniuLive.start(function(ret) {
                    ///alert(JSON.stringify(ret));
                });
            }
        });
        //聊天socket连接
        connect();
    };

    function closedPiu() {
        api.confirm({
            title: '是否确认关闭直播?',
            buttons: ['确定', '取消']
        }, function(ret, err) {
            if (ret.buttonIndex == 1) {
                msgcode('关闭成功')
                qiniuLive.stop();

                setTimeout(function() {
                    api.closeWin({

                    });

                }, 1000)
            }
        });
    };
    function dialog() {
      api.openFrame({
              name: 'dialog',
              url: './dialog.html',
              rect: {
                      x:0,
                      y:0,
                      w:api.winWidth,
                      h:api.winHeight
              },
              bgColor: 'rgba(0,0,0,0.6)',
              bounces: false,
              pageParam: {
                          kename: 'lookcur' //店铺id
                      }
      });
    };

    function fninitPMediaPlayer(ee) {

        var qiniuLive = api.require("qiniuLive");

        qiniuLive.initPMediaPlayer({
            rect: {
                x: 0,
                y: 0,
                w: api.frameWidth,
                h: api.frameWidth * (4/3)
            },
            remoteWindowRect: [{
                x: api.frameWidth - 120,
                y: api.frameWidth * (4/3) - 160,
                w: 120,
                h: 160
            }],
            dataUrl: ee,
            codec: 0,
            prepareTimeout: 10000,
            readTimeout: 10000,
            isLiveStream: false,
            isDelayOptimization: false,
            cacheBufferDuration: 2000,
            maxCacheBufferDuration: 4000,
            fixedOn: api.frameName,
            fixed: true
        }, function(ret) {

        });
    }



    function js() {
        $("#say_list").append('<p style="color:red">我正在举手</p>')
    }

    function opense() {
        api.openWin({
            name: 'brand',
            url: './brand.html',
            pageParam: {
                id: mecshop
            }
        });
    }

    function get_list() {
        //  alert(id)
        api.ajax({
            url: SITE_URL + 'cur_api/curlive/get_some',
            method: 'post',
            data: {
                values: {
                    id: id
                }
            }
        }, function(ret, err) {
            if (ret) {
                $("#fm").css('display', 'block')
                $("#fm").attr('src', ret.data.img_url)

                room=ret.data.room_id;
                mecshop = ret.data.mecshop

                if (ret.data.start == 2) {
                    alert('您的课程已完结')
                    api.closeWin({

                    });

                } else if (ret.data.start == 0) {
                    alert('课程暂未开始,请到时间后重进,您的上课时间:' + ret.data.start_time)
                    $("#img_img").attr('src', ret.data.img_url)
                  //  mecshop = ret.data.cur_id
                        //  alert(ret.data.looklive)
                    $("#titles").html(ret.data.title)

                } else {


                        //  alert(ret.data.looklive)
                    $("#titles").html(ret.data.title)
                    if (ret.data.links) {
                        ll_url = ret.data.links

                        //  alert(ll_url)
                        setTimeout(function() {
                            fninitPMediaPlayer(ret.data.links)
                            //set_room(ret.data.id)
                            room = ret.data.id

                        }, 1000)

                    }
                }


                // alert( JSON.stringify( ret ) );
            } else {
                //  alert( JSON.stringify( err ) );
            }
        });

    }
    //聊天 start

    function connect() {
        // 创建一个 websocket 连接
        ws = new WebSocket("ws://47.93.186.254:9238");
        // websocket 创建成功事件
        ws.onopen = onopen;
        // websocket 接收到消息事件
        ws.onmessage = onmessage;
        ws.onclose = onclose;
        ws.onerror = onerror;
    }

    function onopen()
    {
        var data = "系统消息：建立连接成功";
        console.log(data);
    }

    function onmessage(e)
    {
        var data = JSON.parse(e.data);
        switch (data.type) {
            case 'handShake':
                console.log(data.msg);
                //发送用户登录
                var user_info = {'type': 'login', 'msg': userinfo.nick_name, 'headerimg': userinfo.head_img, 'room': room};
                sendMsg(user_info);
                break;
            case 'login':
                //userList(data.user_list);
                systemMessage('系统消息: ' + data.msg + ' 已上线');
                break;
            case 'logout':
                //userList(data.user_list);
                if (data.msg.length > 0) {
                    systemMessage('系统消息: ' + data.msg + ' 已下线');
                }
                break;
            case 'user':
                messageList(data);
                break;
            case 'system':
                systemMessage();
                break;
        }
    }
    function onclose()
    {
        console.log("连接关闭，定时重连");
        connect();
    }

    // websocket 错误事件
    function onerror()
    {
        var data = "系统消息 : 出错了,请退出重试.";
        console.log(data);
    }

    function confirm(event) {
        var key_num = event.keyCode;
        if (13 == key_num) {
            //send();
            console.log('send error, key_num');
        } else {
            return false;
        }
    }

    function systemMessage(msg) {
        /*
        var html = `<div class="conversation-start">
            <span>` + msg + `</span>
        </div>`;
        var active_chat = document.querySelector('div.active-chat');
        var oldHtml = active_chat.innerHTML;
        active_chat.innerHTML = oldHtml + html;
        active_chat.scrollTop = active_chat.scrollHeight;
        */

        $("#say_list").append('<p>' +  msg + '</p>')
        $("#say_list").scrollTop += 100;
    }

    function sendContent(msg) {
       // var msg = document.querySelector("input#input-value").value;
        //var room = Math.round(Math.random() * 2);
        var reg = new RegExp("\r\n", "g");
        console.log('room1:' + room);
        msg = msg.replace(reg, "");

        sendMsg({type: "user", msg: msg});
        //document.querySelector("input#input-value").value = "";
    }

    function sendMsg(msg) {
        var data = JSON.stringify(msg);
        ws.send(data);
    }

    function userList(user) {
        var html = '';
        for (var i = 0; i < user.length; i++) {
            html += `<li class="person" data-chat="person1">
                    <img src="` + user[i].headerimg + `" alt=""/>
                    <span class="name">` + user[i].username + `</span>
                    <span class="time">` + user[i].login_time + `</span>
                    <span class="preview" style="color: green;font-size: 7px;">在线</span>
                </li>`;
        }
        document.querySelector('ul.people').innerHTML = html;
        document.querySelector('span#numbers').innerHTML = user.length;
    }

    function messageList(data) {
      console.log(data);
      /*
        if (data.from == uname) {
            var html = `<div class="message">
                    <img class="me-header" src="` + data.headerimg + `" alt=""/>
                    <div class="bubble me">` + data.msg + `</div>
                </div>`;
        } else {
            var html = `<div class="message">
                    <img src="` + data.headerimg + `" alt=""/>
                    <div class="bubble you">` + data.msg + `</div>
                </div>`;
        }
        var active_chat = document.querySelector('div.active-chat');
        var oldHtml = active_chat.innerHTML;
        active_chat.innerHTML = oldHtml + html;
        active_chat.scrollTop = active_chat.scrollHeight;
*/
        $("#say_list").append('<p>' + userinfo.nick_name + ':' + data.msg + '</p>')
        $("#say_list").scrollTop += 100;
    }

    //聊天 end
</script>

</html>
